<template>
  <div class="content">
    <!-- 轮播图区域 -->
    <div class="swiper1">
      <div class="swiper-container" ref="swiper1">
        <div class="swiper-wrapper">
          <div
            class="swiper-slide"
            v-for="item in bannerList.banners"
            :key="item.imageUrl"
          >
            <img :src="item.imageUrl" alt="" />
          </div>
        </div>
        <div class="swiper-pagination"></div>
        <div class="swiper-button-prev"></div>
        <div class="swiper-button-next"></div>
      </div>
    </div>

    <div class="list">
      <div class="listLeft">
        <span>流行</span>
        <span>摇滚</span>
        <span>民谣</span>
        <span>电子</span>
        <span>影视原声</span>
        <span>ACG</span>
        <span>新世纪</span>
        <span>爵士</span>
        <span>古典</span>
        <span>乡村</span>
        <span>说唱</span>
      </div>
      <div class="listRight">更多</div>
    </div>

    <!-- 热门歌单内容区域 -->
    <div class="title">
      <h2>热门歌单</h2>
      <p @click="$router.replace('/songlist')">更多</p>
    </div>

    <div class="hotSong" @mouseleave="flag = false">
      <div class="hotsong-left">
        <div class="iconfont icon-Arrowleftback" v-show="flag"></div>
      </div>

      <div class="hotList">
        <div
          class="hotItem"
          @mouseenter="flag = true"
          v-for="(play, index) in playList.playlists"
          :key="play.id"
        >
          <div
            class="hotImg"
            @mouseenter="changeEnter(index)"
            @mouseleave="changeLeave(index)"
          >
            <img :src="play.coverImgUrl" alt="" @click="gotoSonglist(play.id)" />
            <div
              class="iconfont icon-bofanganniu"
              :class="{ item_on: currentIndex === index }"
            ></div>
          </div>
          <div class="hotFont">{{ play.name }}</div>
        </div>
      </div>
      <div class="hotsong-right">
        <div class="iconfont icon-Arrowrightnext" v-show="flag"></div>
      </div>
    </div>
    <div class="spot">
      <div class="spotItem">
        <div class="onespot"></div>
        <div class="twospot"></div>
      </div>
    </div>

    <!-- 新歌首发 -->
    <div class="title title2">
      <h2>新歌首发</h2>
      <p><router-link to="/album2">更多</router-link></p>
    </div>

    <div class="newList" @mouseenter="flag2 = true" @mouseleave="flag2 = false">
      <div class="iconfont icon-Arrowleftback" v-show="flag2"></div>
      <div class="newSong">
        <div class="newsong-list">
          <div
            v-for="(item, index) of newSongList"
            :key="item.id"
            class="newsong-item"
            @mouseenter="changfont(index)"
            @mouseleave="changfont2(index)"
          >
            <img
              class="img1"
              :src="item.picUrl"
              @mouseenter="moveleft(index)"
              @mouseleave="moveleft2(index)"
              alt=""
            />
            <img
              class="img2"
              :class="{ moveleft: leftIndex === index }"
              src="../../../public/images/black.png"
              alt=""
            />
            <div class="newsong-span">
              <div
                class="newsong-top"
                :class="{ colorRed: colorIndex === index }"
              >
                {{ item.name }}
              </div>
              <div class="newsong-bottom">
                {{ item.song.artists[0].name }}
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="iconfont icon-Arrowrightnext" v-show="flag2"></div>
    </div>
    <div class="spot">
      <div class="spotItem">
        <div class="onespot"></div>
        <div class="twospot"></div>
      </div>
    </div>

    <!-- 热门歌手 -->
    <div class="title title2">
      <h2>热门歌手</h2>
      <p>更多</p>
    </div>

    <div class="hotSinger">
      <div
        class="hotSinger-list"
        v-for="song in songList.artists"
        :key="song.id"
      >
        <div class="hotSinger-img">
          <img :src="song.picUrl" alt="" />
        </div>
        <div class="hotSinger-span">{{ song.name }}</div>
      </div>
    </div>
  </div>
</template>

<script>
import { mapState, mapActions } from "vuex";
import Swiper, { Navigation, Pagination, Autoplay } from "swiper";
Swiper.use([Navigation, Pagination, Autoplay]);
export default {
  name: "Home",
  data() {
    return {
      color: "red",
      currentIndex: -1,
      colorIndex: -2,
      leftIndex: -3,
      flag: false,
      flag2: false,
    };
  },
  mounted() {
    this.getBanner();
    this.getSongList();
    this.getPlayList();
    this.getNewSong();
    setTimeout(() => {
      this.initSwiper();
    }, 1000);
  },
  computed: {
    ...mapState({
      bannerList: (state) => state.home.bannerList,
      songList: (state) => state.home.songList,
      playList: (state) => state.home.playList,
      newSongList: (state) => state.home.newSongList,
    }),
  },
  methods: {
    ...mapActions(["getBanner", "getSongList", "getPlayList", "getNewSong"]),

    /* 改变样式 */
    changfont(index) {
      this.colorIndex = index;
    },
    changfont2() {
      this.colorIndex = -2;
    },

    /* 显示隐藏按钮 */
    changeEnter(index) {
      this.currentIndex = index;
    },
    changeLeave() {
      this.currentIndex = -1;
    },

    /* 黑色光碟的偏移 */
    moveleft(index) {
      this.leftIndex = index;
    },
    moveleft2() {
      this.leftIndex = -3;
    },

    initSwiper() {
      this.swiper = new Swiper(this.$refs.swiper1, {
        loop: true, // 循环模式选项
        autoplay: {
          // 自动轮播
          delay: 2000, // 轮播间隔时间
          disableOnInteraction: false, // 当用户点击下一页时，仍会开启自动轮播
        },
        // 如果需要分页器
        pagination: {
          el: ".swiper-pagination",
          clickable: true,
        },
        // 如果需要前进后退按钮
        navigation: {
          nextEl: ".swiper-button-next",
          prevEl: ".swiper-button-prev",
        },
      });

      //鼠标覆盖停止自动切换
      this.swiper.el.onmouseover = function () {
        this.swiper.autoplay.stop();
      };
      //鼠标离开开始自动切换
      this.swiper.el.onmouseout = function () {
        this.swiper.autoplay.start();
      };
    },
     // 去歌单详情界面
    gotoSonglist(songId){
      this.$store.dispatch('songlist/getTrackIdList', songId)
      this.$router.replace({ path: `songlist/${songId}` })
    }
  },
};
</script>

<style lang="less" scoped>
.content {
  /* 轮播图区域 */
  .swiper1 {
    .swiper-container {
      .swiper-wrapper {
        width: 750px;
        height: 300px;
        margin: 0 auto;
        padding-top: 30px;
      }
      img {
        width: 750px;
        height: 300px;
      }
    }
  }

  /* 歌曲类型 */
  .list {
    display: flex;
    width: 1200px;
    height: 40px;
    margin: 30px auto;
    .listLeft {
      width: 1160px;
      display: flex;
      span {
        font-size: 14px;
        height: 40px;
        line-height: 40px;
        text-align: center;
        margin-right: 10px;
        color: #606266;
        padding: 0 30px;
        height: 40px;
        line-height: 40px;
        background: #f8f8f8;
        border-radius: 40px;
        cursor: pointer;
      }
    }
    .listRight {
      width: 40px;
      font-size: 16px;
      height: 40px;
      line-height: 40px;
      text-align: center;
      cursor: pointer;
    }
  }

  /* 热门歌单头部区 */
  .title {
    display: flex;
    width: 1200px;
    margin: 0 auto;
    position: relative;
    h2 {
      font-size: 28px;
      line-height: 28px;
      font-weight: 400;
    }
    p {
      font-size: 16px;
      height: 28px;
      line-height: 28px;
      text-align: center;
      position: absolute;
      right: 0;
      cursor: pointer;
    }
  }
  /* 热门歌单内容区 */
  .hotSong {
    display: flex;
    .hotList {
      width: 1220px;
      height: 318px;
      margin: 0 auto;
      display: flex;
      .hotItem {
        width: 224px;
        height: 268px;
        margin: 25px 10px;
        cursor: pointer;
        .hotImg {
          width: 224px;
          height: 224px;
          overflow: hidden;
          position: relative;
          .icon-bofanganniu {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            z-index: 90;
            font-size: 50px;
          }
          .item_on {
            z-index: 100;
          }
          img {
            position: absolute;
            z-index: 92;
            width: 100%;
            height: 100%;
          }
          img:hover {
            transform: scale(1.1);
            transition: 1s;
          }
        }
        .hotFont {
          font-size: 16px;
          margin-top: 18px;
          // 单行文本溢出隐藏,并显示省略号
          white-space: nowrap;
          overflow: hidden;
          text-overflow: ellipsis;
        }
      }
    }
    .hotsong-left {
      width: 60px;
      height: 60px;
      margin: 100px 0;
      .icon-Arrowleftback {
        font-size: 60px;
        margin: auto 0;
        cursor: pointer;
      }
    }
    .hotsong-right {
      width: 60px;
      height: 60px;
      margin: 100px 0;
      .icon-Arrowrightnext {
        font-size: 60px;
        margin: auto 0;
        cursor: pointer;
      }
    }
  }
  .spot {
    width: 100%;
    height: 32px;
    .spotItem {
      display: flex;
      justify-content: center;
      .onespot {
        width: 8px;
        height: 8px;
        background: blue;
        border-radius: 8px;
        margin: 5px;
      }
      .twospot {
        width: 8px;
        height: 8px;
        border-radius: 8px;
        background: #909399;
        margin: 5px;
      }
    }
  }

  /* 新歌首发 */
  .title2 {
    padding-bottom: 30px;
  }
  .newList {
    display: flex;
    .newSong {
      width: 1200px;
      height: 312px;
      margin: 0 auto;
      .newsong-list {
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
        .newsong-item {
          width: 386px;
          height: 120px;
          background-color: #f7f8f9;
          // padding: 0 10px;
          margin: 10px 0;
          position: relative;
          .img1 {
            width: 120px;
            height: 120px;
            position: absolute;
            z-index: 100;
            cursor: pointer;
          }
          .img2 {
            width: 110px;
            height: 110px;
            position: absolute;
            top: 5px;
            left: 24px;
            z-index: 99;
            transition: 1s;
          }
          .moveleft {
            left: 34px;
          }
          .newsong-span {
            width: 178px;
            height: 46px;
            position: absolute;
            right: 0;
            top: 38px;
            padding: 0 36px;
            cursor: pointer;
            .newsong-top {
              font-size: 16px;
              color: #333333;
              padding-bottom: 10px;
            }
            .colorRed {
              color: red;
            }
            .newsong-bottom {
              font-size: 14px;
              color: #909399;
              // 单行文本溢出隐藏,并显示省略号
              white-space: nowrap;
              overflow: hidden;
              text-overflow: ellipsis;
            }
          }
        }
      }
    }
    .icon-Arrowleftback {
      font-size: 60px;
      margin: auto 0;
      cursor: pointer;
    }
    .icon-Arrowrightnext {
      font-size: 60px;
      margin: auto 0;
      cursor: pointer;
    }
  }

  /* 热门歌手 */
  .hotSinger {
    display: flex;
    justify-content: space-around;
    width: 1230px;
    height: 254px;
    margin: 0 auto;
    .hotSinger-list {
      width: 175px;
      height: 254px;
      background-color: grenn;
      display: flex;
      flex-direction: column;
      align-items: center;
      overflow: hidden;
      .hotSinger-img {
        width: 175px;
        height: 175px;
        border-radius: 50%;
        background-color: green;
        overflow: hidden;
        cursor: pointer;
        img {
          width: 175px;
          height: 175px;
        }
      }
      img:hover {
        transform: scale(1.1);
        transition: 1s;
      }

      .hotSinger-span {
        font-size: 16px;
        padding-top: 10px;
      }
    }
  }
}
</style>
